<template>
    <div class="bg">
        <div class="title">
            <h1>{{ msg }}</h1>
        </div>
        <div class="login">
            <h2>用户登录</h2>
            <div class="form">
                <el-form :model="form" status-icon :rules="rules" ref="form">

                    <el-form-item prop="schoolId">
                        <el-input prefix-icon="el-icon-office-building" @input="search" @focus="focus" @blur="blurName()"
                            v-model="schoolName" autocomplete="off" placeholder="学校名称"></el-input>
                        <div class="dropdown" v-if="result.length == 0" style="display: none;" ref="dropdown">
                            <span v-for="(item, index) in options" :key="item.id" @click="selectFu(item, index)">{{
                                item.label
                            }}</span>
                        </div>
                        <div class="dropdown" v-else ref="dropdown" style="display: none;">
                            <span v-for="(item, index) in result" :key="item.id" @click="selectFu(item, index)">{{
                                item.label
                            }}</span>
                        </div>
                    </el-form-item>

                    <el-form-item prop="userId">
                        <el-input prefix-icon="el-icon-user" v-model="form.userId" autocomplete="off"
                            placeholder="userId"></el-input>
                    </el-form-item>

                    <el-form-item prop="userPassword">
                        <el-input prefix-icon="el-icon-key" v-model="form.userPassword" autocomplete="off" placeholder="密码"
                            type="password"></el-input>
                    </el-form-item>
                </el-form>
                <div class="submit">
                    <el-button type="primary" @click="submitForm('form')" style="width: 100%;">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

  
<script>
import pinyinMatch from 'pinyin-match'
export default {
    name: 'LoginPage',
    data() {
        return {
            msg: '高中选课系统',
            interval: '',
            schoolName: '',
            form: {
                schoolId: '',
                userId: '',
                userPassword: '',
            },
            result: [],
            rules: {
                userId: [
                    { required: true, message: 'userId不能为空', trigger: 'blur' }
                ],
                userPassword: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ]
            },
            options: [{
                id: 1,
                label: '河北师范大学'
            }, {
                id: 2,
                label: '河北科技大学'
            }, {
                id: 3,
                label: '燕山大学'
            }, {
                id: 4,
                label: '东北大学'
            }, {
                id: 5,
                label: '北京大学'
            }, {
                id: 6,
                label: '清华大学'
            }],
        }
    },
    methods: {
        submitForm(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    (async () => {
                        // 获取加密之后密码
                        let pass = await this.Rsa.rsaPublicData(this.form.userPassword);
                        console.log(pass);
                        let result = await this.$axios.post('http://39.105.215.62:8300/login/login', {
                            // let result = await this.$axios.post('/login/login/login', {
                            schoolId: this.form.schoolId,
                            userId: this.form.userId,
                            userPassword: pass
                        })
                        console.log(result);
                        if (result.code == '200') {
                            alert(result.msg);
                            // 查找学校头像
                            // let scInfo = await this.$axios.post('http://39.105.215.62:8000/school/findSchoolIco', { id: this.form.schoolId })
                            // 存储信息
                            sessionStorage.setItem('token', result.data.token)//将后端返回的token值存储在本地
                            if (result.data.auth[0] == 'admin_per') {
                                let res = await this.$axios.post('http://39.105.215.62:8100/admin/selectAdministratorInfo', { administratorId: Number(this.form.userId), schoolId: Number(this.form.schoolId) })
                                console.log(res);
                                sessionStorage.setItem('info', JSON.stringify({ ...result.data, ...res.data }));
                            }
                            // if (result.data.auth[0] == 'teacher_per') {
                            //     let res = await this.$axios.post('http://39.105.215.62:8200/RenFindTeachersController/queryEverything')

                            // }
                            if (result.data.auth[0] == 'student_per') {
                                console.log();
                                let res = await this.$axios.post("http://39.105.215.62:8100/student/findStudentInfoCreatedUser", { studentId: this.form.userId, schoolId: this.form.schoolId });
                                console.log(res);
                                sessionStorage.setItem('info', JSON.stringify({ ...result.data, ...res.data }));
                            }
                            // 页面跳转
                            this.$router.push('/home')
                            this.$message({
                                showClose: true,
                                message: 'Welcome',
                                type: 'success'
                            });
                        }
                    })()
                } else {
                    this.$message.error('存在未填项')
                    return false;
                }
            });
        },
        search() {
            this.result = []
            console.log(this.id);
            for (let item in this.options) {
                if (pinyinMatch.match(this.options[item].label, this.schoolName)) {
                    this.result.push(this.options[item]);
                }
            }
            console.log(this.result);
        },
        focus() {
            this.$refs.dropdown.style.display = 'flex';
        },
        blurName() {
            if (this.interval) {
                clearInterval(this.interval);
                this.interval = '';
            } else {
                this.interval = setInterval(() => {
                    this.$refs.dropdown.style.display = 'none';
                    clearInterval(this.interval);
                    this.interval = '';
                }, 100)
            }
        },
        selectFu(item, index) {
            console.log(item, index);
            this.schoolName = item.label;
            this.form.schoolId = item.id;
            // this.$refs.dropdown.style.display = 'none';
        },
    },
    // 生命周期函数--钩子函数一般在初始化页面完成后，再对DOM节点进行相关操作
    async mounted() {
        let res = await this.$axios.get('http://39.105.215.62:8000/school/selectAllSchools');
        // let res = await this.$axios.get('/admin/school/selectAllSchools');
        console.log(res);
        if (res.code == '200') {
            this.options = res.data.map(item => {
                return { id: item.schoolId, label: item.schoolName }
            });
        } else {
            this.$message.error(res.msg);
        }
    }
}
</script>
  
<style scoped>
.bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: url("../assets/bg.jpg") no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.title {
    width: 400px;
    height: 500px;
    margin-right: 50px;
    color: #fff;
    font-size: 20px;
}

.login {
    width: 60vh;
    height: 60vh;
    border-radius: 50px;
    background-image: linear-gradient(0deg, #4facfe 0%, #00f2fe 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form {
    padding: 30px;
    width: 70%;
}

.submit {
    margin-top: 40px;
}

.dropdown {
    position: absolute;
    top: 65px;
    left: 2px;
    z-index: 3;
    border-radius: 3px;
    box-shadow: 0 2px 10px 2px #92b6dd;
    overflow: auto;
    background-color: #fff;
    max-height: 150px;
    width: 300px;
    margin-top: -23px;
    display: flex;
    flex-direction: column;
    color: #ccc;
}

.dropdown span {
    line-height: 30px;
}

.dropdown span:hover {
    color: black;
    cursor: pointer;
    box-shadow: 0 2px 10px 2px #92b6dd;
}
</style>